<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矿用带式输送机监测系统关键零部件剩余寿命预测平台</title>

    <!-- unpkg -->
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <style>
        /* 为了使用图标，引入 Lucide 图标库样式 */
        @import url('https://unpkg.com/lucide@latest/dist/css/lucide.min.css');

        /* 为 ECharts 图表容器设置高度 */
        .chart-container {
            height: 300px;
            width: 100%;
            /* 添加宽度样式 */
        }

        /* 设置全局字体为宋体 */
        body {
            font-family: SimSun, serif;
        }
    </style>
</head>

<body>
    <!-- Vue挂载点 -->
    <div id="app">
        <el-container class="h-screen w-screen">
            <!-- 顶部导航栏 -->
            <!-- 修改后的 el-header -->
            <el-header class="text-white flex items-center justify-center shadow-lg ">
                <el-card class="bg-transparent w-full"
                    :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }"
                    style="background-color: var(--el-color-primary)">
                    <span class=" font-bold whitespace-nowrap">
                        滚动轴承健康管理系统
                    </span>
                </el-card>
            </el-header>

            <!-- 内容区域 -->
            <el-container>
                <!-- 左侧布局 -->
                <el-aside width="200px" class="bg-gray-100 p-2"
                    style="background-color: #f0f4f8; margin-top: 10px; margin-left: 20px;"> <!-- 修改背景色 -->
                    <el-menu default-active="fptMonitor" class="border-none"
                        style="background-color: #f0f4f8; margin-top: 20px;" @select="handleSelect"> <!-- 修改背景色 -->
                        <el-menu-item index="operationParamsManagement">
                            <el-icon>
                                <i class="lucide lucide-setup"></i>
                            </el-icon>
                            运行参数管理
                        </el-menu-item>
                        <el-menu-item index="abnormalMonitoring">
                            <el-icon>
                                <i class="lucide lucide-alert-circle"></i>
                            </el-icon>
                            异常监控
                        </el-menu-item>
                        <el-sub-menu index="faultAndLifePrediction">
                            <template #title>
                                <el-icon>
                                    <i class="lucide lucide-histogram"></i>
                                </el-icon>
                                故障及寿命预测
                            </template>
                            <el-menu-item index="faultDetection">
                                <el-icon>
                                    <i class="lucide lucide-alert-triangle"></i>
                                </el-icon>
                                故障检测
                            </el-menu-item>
                            <el-menu-item index="lifePrediction">
                                <el-icon>
                                    <i class="lucide lucide-time"></i>
                                </el-icon>
                                剩余寿命预测
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="systemSettings">
                            <el-icon>
                                <i class="lucide lucide-setting"></i>
                            </el-icon>
                            系统设置
                        </el-menu-item>
                    </el-menu>
                </el-aside>


                <!-- 右侧布局 -->
                <el-main class="!p-0">
                    <!-- 功能模块1 -->

                    <!-- 关键零部件基础信息 -->
                    <el-card header="关键零部件基础信息">
                        <el-row>
                            <el-col :span="6">
                                <el-input v-model="searchQuery" placeholder="请输入搜索内容"></el-input>
                            </el-col>
                            <el-col :span="3">
                                <el-button @click="handleSearch">搜索</el-button>
                            </el-col>
                            <el-col :span="12" style="display: flex; justify-content: flex-end;">
                                <el-button type="primary" @click="handleImport">历史数据导入</el-button>
                                <el-button type="primary" @click="handleExport"
                                    style="margin-left: 10px;">数据导出</el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        const { createApp, onMounted, ref } = Vue;
        const app = createApp({
            setup() {
                const searchQuery = ref('');

                // 生成随机数据的函数
                const generateRandomTableData = () => {
                    const data = [];
                    for (let i = 0; i < 5; i++) {
                        data.push({
                            id: `00${i + 1}`,
                            device: `轴承RB${i + 1}`,
                            speed: `${Math.floor(Math.random() * 2000) + 1000}r/min`,
                            load: `${Math.floor(Math.random() * 50) + 10}KN`,
                            radialForce: `${Math.floor(Math.random() * 30) + 10}KN`,
                            temperature: `${(Math.random() * 10 + 20).toFixed(1)}℃`,
                            status: ['良好', '一般', '故障'][Math.floor(Math.random() * 3)]
                        });
                    }
                    return data;
                };

                const generateRandomChartData = () => {
                    const data = [];
                    for (let i = 0; i < 3; i++) {
                        const randomSeriesData = [];
                        for (let j = 0; j < 7; j++) {
                            randomSeriesData.push(Math.floor(Math.random() * 2000));
                        }
                        data.push({
                            title: `编号00${i + 1} 实时数据`,
                            seriesData: randomSeriesData
                        });
                    }
                    return data;
                };

                const tableData = ref(generateRandomTableData());
                const chartData = ref(generateRandomChartData());
                const chartRefs = ref([]);

                const handleSearch = () => {
                    // 这里可以实现搜索逻辑
                };

                const handleImport = () => {
                    // 这里可以实现历史数据导入逻辑
                };

                const handleExport = () => {
                    // 这里可以实现数据导出逻辑
                };

                const handleEdit = (row) => {
                    // 这里可以实现编辑逻辑
                };

                const handleDelete = (row) => {
                    // 这里可以实现删除逻辑
                };

                onMounted(() => {
                    chartData.value.forEach((chart, index) => {
                        const chartDom = chartRefs.value[index];
                        if (chartDom) {
                            const myChart = echarts.init(chartDom);
                            myChart.setOption({
                                title: {
                                    text: chart.title
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: chart.seriesData,
                                    type: 'line'
                                }]
                            });
                        }
                    });
                });

                return {
                    searchQuery,
                    tableData,
                    chartData,
                    chartRefs,
                    handleSearch,
                    handleImport,
                    handleExport,
                    handleEdit,
                    handleDelete
                };
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>

</html>